<template>
  <div class="systemSettings">
    <ul class="header">
      <li :class="defaultData.tabsKey === '1'?'active':''" @click="HandleChange('1')">
        <a-tooltip content="配置">
          <icon-settings/>
        </a-tooltip>
      </li>
      <li :class="defaultData.tabsKey === '2'?'active':''" @click="HandleChange('2')">
        <a-tooltip content="网络配置">
          <icon-select-all/>
        </a-tooltip>
      </li>
    </ul>

    <div class="content_form" v-if="defaultData.tabsKey === '1'">
      <a-form :model="defaultForm" auto-label-width>
        <a-form-item field="width" label="宽度">
          <a-input-number v-model="defaultForm.width" mode="button"/>
        </a-form-item>
        <a-form-item field="height" label="高度">
          <a-input-number v-model="defaultForm.height" mode="button"/>
        </a-form-item>
        <a-form-item field="backgroundColor" label="背景颜色" v-if="!defaultForm.isSkyBox">
          <color-picker @change="HandleColorChange" v-model:pureColor="defaultForm.backgroundColor"/>
        </a-form-item>
        <a-form-item field="isSkyBox" label="天空盒子">
          <a-switch type="line" v-model="defaultForm.isSkyBox"/>
        </a-form-item>
        <template v-if="defaultForm.isSkyBox">
          <a-form-item field="skyBox" label="前">
            <a-upload :limit="1" accept="image/png" v-model="defaultForm.front"></a-upload>
          </a-form-item>
          <a-form-item field="skyBox" label="后">
            <a-upload :limit="1" accept="image/png" v-model="defaultForm.back"></a-upload>
          </a-form-item>
          <a-form-item field="skyBox" label="左">
            <a-upload :limit="1" accept="image/png" v-model="defaultForm.left"></a-upload>
          </a-form-item>
          <a-form-item field="skyBox" label="右">
            <a-upload :limit="1" accept="image/png" v-model="defaultForm.right"></a-upload>
          </a-form-item>
          <a-form-item field="skyBox" label="上">
            <a-upload :limit="1" accept="image/png" v-model="defaultForm.up"></a-upload>
          </a-form-item>
          <a-form-item field="skyBox" label="下">
            <a-upload :limit="1" accept="image/png" v-model="defaultForm.down"></a-upload>
          </a-form-item>
        </template>
        <a-form-item field="width" label="简介">
          <a-mention v-model="defaultForm.describe" type="textarea"/>
        </a-form-item>
      </a-form>
      <div class="footer">
        <a-button type="primary" long>保存</a-button>
      </div>
    </div>

    <div class="content_form" v-if="defaultData.tabsKey === '2'">
      <a-form :model="defaultMqtt" auto-label-width>
        <a-form-item label="mqtt连接地址">
          <a-input v-model="defaultMqtt.mqttServer" allow-clear autocapitalize="none"/>
        </a-form-item>
        <a-form-item label="客户端ID">
          <a-input-search v-model="defaultMqtt.mqttClintId" button-text="刷新" search-button @search="HandleSearch"  autocapitalize="none"/>
        </a-form-item>
        <a-form-item label="用户名">
          <a-input v-model="defaultMqtt.username" allow-clear  autocapitalize="none"/>
        </a-form-item>
        <a-form-item label="密码">
          <a-input v-model="defaultMqtt.password" allow-clear  autocapitalize="none"/>
        </a-form-item>
      </a-form>
    </div>

  </div>
</template>
<script lang="ts" setup>
import {computed, ref, onMounted, reactive} from "vue";
import {ColorPicker} from "vue3-colorpicker";
import "vue3-colorpicker/style.css";
import {uuid} from "../common/uuid";

let defaultForm = ref({
  width: 1920,
  height: 1080,
  backgroundColor: "#ffffff",
  isSkyBox: false,
  front: null,
  back: null,
  left: null,
  right: null,
  up: null,
  down: null,
  describe: ""
})
const defaultData = reactive({
  tabsKey: "1",
})
let defaultMqtt = ref({
  mqttServer: "",
  mqttClintId: "",
  username: "",
  password: ""
})

// const db = new IndexedDB();

// const Init = () => {
//   if(db.isCreate === false){
//     setTimeout(Init,200);
//   }else{
//     if (db.dataList.length > 0) {
//       const list = db.dataList
//       defaultForm.value = JSON.parse(list[0].F_System);
//       defaultMqtt.value = JSON.parse(list[0].F_Mqtt);
//     }
//   }
// }
const HandleColorChange = () => {

}
const HandleChange = (value: string) => {
  defaultData.tabsKey = value;
  // if (db.dataList.length === 0) {
  //   db.Add({
  //     F_System: JSON.stringify(defaultForm.value),
  //     F_Mqtt: JSON.stringify(defaultMqtt.value),
  //     F_ThreeD: JSON.stringify({})
  //   })
  // } else {
  //   const list = db.dataList
  //   db.Update({
  //     F_Id: list[0].F_Id,
  //     F_System: JSON.stringify(defaultForm.value),
  //     F_Mqtt: JSON.stringify(defaultMqtt.value),
  //     F_ThreeD: list[0].F_ThreeD
  //   })
  // }
}
const HandleSearch = () => {
  defaultMqtt.value.mqttClintId = uuid();
}

// onMounted(() => {
//    Init();
// })
</script>
<style lang="less" scoped>
.systemSettings {

  > .header {
    margin: 0;
    padding: 0;
    display: flex;
    width: 100%;
    height: 40px;

    > li {
      flex: 1;
      height: 100%;
      background-color: #365b77;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #ffffff;
      cursor: pointer;

      &.active {
        color: rgb(var(--orange-6));
      }
    }
  }

  > .content_form {
    width: calc(100% - 20px);
    height: calc(100% - 80px);
    margin: 20px 10px 0px;
  }

}

ul li {
  list-style: none;
}
</style>
